<template>
	<view class="category-tab">
		<view class="category-tab-title">
			<view class="title-inner">
				<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" styleType="text"
				 activeColor="#e2397a">
				</uni-segmented-control>

			</view>
			<view class="iconfont iconsearch"> </view>
		</view>
		<scroll-view @scrolltolower="handleTolower" scroll-y  enable-flex class="category_tab_content">
			<view class="category_item" v-for="item of vertical" :key="item.id">
				<image :src="item.thumb" mode="widthFix"></image>
			</view>
		</scroll-view>

	</view>

</template>

<script>
	import {
		uniSegmentedControl
	} from '@dcloudio/uni-ui';
	export default {
		data() {
			return {
				items: [{
						title: '最新',
						order: 'new'
					},
					{
						title: '热门',
						order: 'hot'
					}

				],
				current: 0,
				params: {
					limit: 30,
					skip: 0,
					order: 'new'
				},
				id: 0,
				vertical: [],
				// 是否还有更多
				hasMore:true
			}
		},
		onLoad(options) {
			console.log('option', options);
			this.id = options.id
			this.getList()
		},
		components: {
			uniSegmentedControl
		},
		methods: {
			/* 
				1.根据被点击的标题切换标题
				2.切换order
				3.重新发送请求
			 
			 */
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}else{
					// 点击的是相同的标题然后中断
					return
				}
				// 将点击后拿到的order值赋给params的order
				this.params.order = this.items[e.currentIndex].order
				// 点击切换选项的时候必须要把skip重新赋值为0
				this.params.skip = 0
				// 必须要把vertical数组清空再发送请求
				this.vertical= []
				this.getList()

			},
			async getList() {
				const {
					res
				} = await this.request({
					url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
					data: this.params
				})
				this.vertical = [...this.vertical,...res.vertical]
				
				if(res.vertical.length===0){
					this.hasMore = false
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
					return
				}

			},
			// 处理分页
			handleTolower(){
				if(this.hasMore){
					this.params.skip+=this.params.limit
					this.getList()
				}else{
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.category-tab {
		.category-tab-title {
			position: relative;

			.title-inner {
				width: 50%;
				margin: 0 auto;

			}

			.iconsearch {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 5%;
			}


		}
	}

	.category_tab_content {
		display: flex;
		flex-wrap: wrap;
		height: calc(100vh - 36px);

		.category_item {
			width: 33.33%;
			border: 5rpx solid #FFFFFF;

			image {}
		}
	}
</style>
